<!--考勤时段设置-->
<template>
    <div class="avue-crud">
        <basic-container>
            <p class="contain-title">考勤时段设置</p>
            <div class="door-search">
<!--                新增时段及弹窗-->
                <el-button type="success"  @click="dialogFormVisible = true">新增时段</el-button>
                <el-dialog title="新增时段" :visible.sync="dialogFormVisible" class="attendance">
                    <el-form :model="form" class="pad">
                        <!--            考勤开始时间-->
                        <el-form-item label="考勤开始时间" :label-width="formLabelWidth">
                            <el-time-picker
                                    v-model="value4"
                                    :picker-options="{
                                                          selectableRange: '00:00:00 - 23:59:59'
                                                        }"
                                    placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                        <!--             考勤结束时间-->
                        <el-form-item label="考勤结束时间" :label-width="formLabelWidth">
                            <el-time-picker
                                    v-model="value5"
                                    :picker-options="{
                                                          selectableRange: '00:00:00 - 00:00:00'
                                                        }"
                                    placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
<!--                        考勤类型-->
                        <el-form-item label="考勤类型" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择单位">
                                <el-option label="校门"></el-option>
                                <el-option label="宿舍"></el-option>
                            </el-select>
                        </el-form-item>
                        <!--         考勤状态-->
                        <el-form-item label="考勤状态" :label-width="formLabelWidth">
                            <el-radio v-model="radio" label="1">正常</el-radio>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>
                    </div>
                </el-dialog>
                <el-button type="danger" style="margin-left: 40px">批量删除</el-button>
            </div>
            <!--    门禁组列表-->
            <el-form>
                <el-form-item>
                    <el-table :data="equipData" ref="multipleTable"
                              tooltip-effect="dark"
                              style="width: 100%"
                              @selection-change="handleSelectionChange">
                        <el-table-column label="全选"
                                         type="selection"
                                         width="55">
                        </el-table-column>
                        <el-table-column property="id" label="时段id" width="60px"></el-table-column>
                        <el-table-column property="number" label="考勤时段"></el-table-column>
                        <el-table-column property="place" label="考勤类型"></el-table-column>
                        <el-table-column property="state" label="当前状态">
                            <template slot-scope="scope">
                                <el-tag size="medium"  type="success">{{ scope.row.state }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column property="time" label="创建时间"></el-table-column>
                        <el-table-column property="opera" label="操作" >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </basic-container>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name: "time",
        computed: {
            ...mapGetters(['permissions']),
        },
        data() {
            return {
                input:'',
                options: [],
                value: [],
                list: [],
                loading: false,
                states: [],
                selects: [{          //多选下拉框
                    value: '选项1',
                    label: '男'
                }, {
                    value: '选项2',
                    label: '女'
                }, ],
                value1: [],
                value2: [],
                value3: [],
                value4: new Date(2016, 9, 10, 0, 0),
                value5: new Date(2016, 9, 10, 0, 0),
                equipData:[{       //门禁组列表
                    id:'001',
                    number:'06:25-07:35',
                    place:'宿舍',
                    state:'正常',
                    time:'2020-12-01',
                    opera:''
                }],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                radio: '1',
            }
        },
        mounted() {
            this.list = this.states.map(item => {
                return { value: `value:${item}`, label: `label:${item}` };
            });
        },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        },

    }
</script>

<style scoped>
    .contain-title{
        font-weight: bold;
    }
    .door-search p {
        font-size: 14px;
        display: inline-block;
        margin-right: 20px;
    }
    .time-style{
        width: 23%;
        margin-right: 20px;
        display: inline-block;
    }
    .search-style{
        width: 15%;
        margin-right: 20px;
    }
    .select-style{
        width: 10% !important;
        margin-right: 20px;
    }
    .choice{
        float: left;
    }
    .screen{
        margin-left: 36px;
        display: inline-block;
    }
    .jj{
        margin-left: 160px;
    }
    .ma{
        margin-right: 12px !important;
    }
    .attendance{
        width: 38%;
        margin: 0 auto;
    }
    .pad{
        padding: 30px 32px 20px 0;
    }
</style>